<!DOCTYPE html>
<html lang="zh-CN">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>虚拟银行系统 - 产品详情</title>
  <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.15.4/css/all.min.css">
  <link rel="stylesheet" href="/css/main.css">
  <style>
    /* Product detail specific styles */
    .product-detail-container {
      max-width: 1000px;
      margin: 0 auto;
    }
    
    .product-overview {
      display: flex;
      margin-bottom: var(--spacing-lg);
    }
    
    .product-info {
      flex: 1;
      padding-right: var(--spacing-lg);
    }
    
    .product-sidebar {
      width: 300px;
      flex-shrink: 0;
    }
    
    .product-name {
      font-size: 24px;
      font-weight: 500;
      margin-bottom: var(--spacing-xs);
    }
    
    .product-code {
      color: var(--light-text);
      margin-bottom: var(--spacing-md);
    }
    
    .product-highlights {
      display: flex;
      flex-wrap: wrap;
      margin-bottom: var(--spacing-md);
    }
    
    .product-highlight {
      margin-right: var(--spacing-xl);
      margin-bottom: var(--spacing-md);
    }
    
    .highlight-label {
      color: var(--light-text);
      margin-bottom: 4px;
      font-size: 13px;
    }
    
    .highlight-value {
      font-size: 20px;
      font-weight: 500;
    }
    
    .highlight-value.accent {
      color: var(--accent-color);
    }
    
    .product-meta {
      display: flex;
      flex-wrap: wrap;
      margin-bottom: var(--spacing-md);
    }
    
    .product-meta-item {
      display: flex;
      align-items: center;
      margin-right: var(--spacing-lg);
      margin-bottom: var(--spacing-xs);
      color: var(--light-text);
      font-size: 13px;
    }
    
    .product-meta-item i {
      margin-right: var(--spacing-xs);
    }
    
    .product-risk {
      display: inline-block;
      padding: 4px 12px;
      border-radius: 12px;
      font-size: 13px;
      margin-bottom: var(--spacing-md);
    }
    
    .product-risk.low {
      background-color: rgba(82, 196, 26, 0.1);
      color: var(--success-color);
    }
    
    .product-risk.medium {
      background-color: rgba(250, 173, 20, 0.1);
      color: var(--warning-color);
    }
    
    .product-risk.high {
      background-color: rgba(245, 34, 45, 0.1);
      color: var(--error-color);
    }
    
    .product-sales {
      margin-bottom: var(--spacing-md);
    }
    
    .sales-progress {
      height: 8px;
      background-color: var(--light-bg);
      border-radius: 4px;
      margin-bottom: 4px;
      overflow: hidden;
    }
    
    .sales-progress-bar {
      height: 100%;
      background-color: var(--primary-color);
      border-radius: 4px;
    }
    
    .sales-info {
      display: flex;
      justify-content: space-between;
      font-size: 13px;
      color: var(--light-text);
    }
    
    .status-badge {
      display: inline-block;
      padding: 2px 8px;
      border-radius: 4px;
      font-size: 12px;
      margin-left: var(--spacing-sm);
    }
    
    .status-badge.active {
      background-color: rgba(82, 196, 26, 0.1);
      color: var(--success-color);
    }
    
    .status-badge.sold-out {
      background-color: rgba(245, 34, 45, 0.1);
      color: var(--error-color);
    }
    
    .status-badge.ended {
      background-color: rgba(180, 180, 180, 0.1);
      color: var(--light-text);
    }
    
    .purchase-card {
      position: sticky;
      top: var(--spacing-lg);
    }
    
    .purchase-amount {
      margin-bottom: var(--spacing-md);
    }
    
    .amount-input-group {
      display: flex;
      align-items: center;
      margin-bottom: var(--spacing-xs);
    }
    
    .amount-input-label {
      font-size: 15px;
      margin-right: var(--spacing-xs);
    }
    
    .amount-input {
      flex: 1;
      padding: var(--spacing-sm);
      border: 1px solid var(--divider-color);
      border-radius: var(--border-radius-sm);
      transition: all 0.3s;
    }
    
    .amount-input:focus {
      border-color: var(--primary-color);
      outline: none;
      box-shadow: 0 0 0 2px rgba(26, 58, 143, 0.1);
    }
    
    .purchase-hint {
      display: flex;
      justify-content: space-between;
      font-size: 13px;
      color: var(--light-text);
      margin-bottom: var(--spacing-sm);
    }
    
    .quick-amount-options {
      display: flex;
      flex-wrap: wrap;
      gap: var(--spacing-sm);
      margin-top: var(--spacing-sm);
      margin-bottom: var(--spacing-md);
    }
    
    .quick-amount-option {
      padding: var(--spacing-xs) var(--spacing-sm);
      border: 1px solid var(--divider-color);
      border-radius: var(--border-radius-sm);
      font-size: 13px;
      cursor: pointer;
      transition: all 0.3s;
    }
    
    .quick-amount-option:hover, .quick-amount-option.selected {
      border-color: var(--primary-color);
      background-color: rgba(26, 58, 143, 0.1);
      color: var(--primary-color);
    }
    
    .purchase-summary {
      margin-bottom: var(--spacing-md);
      padding: var(--spacing-md);
      background-color: var(--light-bg);
      border-radius: var(--border-radius-md);
    }
    
    .summary-item {
      display: flex;
      justify-content: space-between;
      margin-bottom: var(--spacing-xs);
    }
    
    .summary-label {
      color: var(--light-text);
    }
    
    .summary-total {
      font-weight: 500;
      color: var(--accent-color);
    }
    
    .product-tabs {
      margin-bottom: var(--spacing-lg);
    }
    
    .tab-content {
      padding: var(--spacing-lg);
      background-color: white;
      border-radius: 0 0 var(--border-radius-md) var(--border-radius-md);
      box-shadow: var(--card-shadow);
    }
    
    .product-description {
      line-height: 1.6;
    }
    
    .product-section-title {
      font-weight: 500;
      margin-bottom: var(--spacing-md);
      padding-bottom: var(--spacing-sm);
      border-bottom: 1px solid var(--divider-color);
    }
    
    .feature-list {
      display: grid;
      grid-template-columns: repeat(auto-fill, minmax(250px, 1fr));
      gap: var(--spacing-md);
      margin-bottom: var(--spacing-lg);
    }
    
    .feature-item {
      display: flex;
      align-items: flex-start;
    }
    
    .feature-icon {
      width: 40px;
      height: 40px;
      border-radius: 50%;
      background-color: rgba(26, 58, 143, 0.1);
      color: var(--primary-color);
      display: flex;
      align-items: center;
      justify-content: center;
      margin-right: var(--spacing-md);
      flex-shrink: 0;
    }
    
    .feature-content {
      flex: 1;
    }
    
    .feature-title {
      font-weight: 500;
      margin-bottom: 4px;
    }
    
    .feature-desc {
      font-size: 13px;
      color: var(--light-text);
      line-height: 1.4;
    }
    
    .investment-chart {
      height: 300px;
      margin-bottom: var(--spacing-lg);
    }
    
    .table-container {
      overflow-x: auto;
      margin-bottom: var(--spacing-lg);
    }
    
    .notice-section {
      margin-bottom: var(--spacing-lg);
    }
    
    .notice-item {
      margin-bottom: var(--spacing-md);
    }
    
    .notice-title {
      font-weight: 500;
      margin-bottom: var(--spacing-xs);
      display: flex;
      align-items: center;
    }
    
    .notice-title i {
      margin-right: var(--spacing-xs);
      color: var(--warning-color);
    }
    
    .notice-content {
      font-size: 14px;
      color: var(--light-text);
      padding-left: 20px;
    }
    
    @media (max-width: 991px) {
      .product-overview {
        flex-direction: column;
      }
      
      .product-info {
        padding-right: 0;
        margin-bottom: var(--spacing-lg);
      }
      
      .product-sidebar {
        width: 100%;
      }
      
      .purchase-card {
        position: static;
      }
    }
  </style>
</head>
<body>
  <div class="app-wrapper">
    <!-- Top Navigation Bar -->
    <div id="top-navbar"></div>
    
    <div class="main-container">
      <!-- Sidebar -->
      <div id="sidebar"></div>
      
      <!-- Main Content -->
      <div class="content">
        <div class="page-header">
          <div class="page-title">产品详情</div>
          <div class="breadcrumb">
            <a href="/index.html">首页</a>
            <i class="fas fa-angle-right"></i>
            <a href="/financial.html">理财产品</a>
            <i class="fas fa-angle-right"></i>
            <span>产品详情</span>
          </div>
        </div>
        
        <div class="product-detail-container" id="product-detail-content">
          <div class="loader-container">
            <div class="loader"></div>
          </div>
        </div>
      </div>
    </div>
  </div>

  <!-- Scripts -->
  <script src="/js/utils/Utils.js"></script>
  <script src="/js/components/Toast.js"></script>
  <script src="/js/services/ApiService.js"></script>
  <script src="/js/components/TopNavBar.js"></script>
  <script src="/js/components/SideBar.js"></script>
  <script src="/js/pages/product-detail.js"></script>
</body>
</html>
